

<!-- 面包屑导航 -->

<!-- 用户列表 -->
<template>

  <div class="main_welcome">

    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文件管理</el-breadcrumb-item>
      <el-breadcrumb-item>文件列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row :gutter="25">
        <el-col :span="10">

          <el-input placeholder="请输入搜索内容" >
            <el-button slot="append" icon="el-icon-search" ></el-button>
          </el-input>
        </el-col>

        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible = true">查询文件</el-button>
        </el-col>
      </el-row>
    </el-card>

    <table class="table table-bordered table-hover">
      <thead>
      <el-dropdown>


        <el-dropdown-menu slot="dropdown">-->
          <el-dropdown-item >复制到</el-dropdown-item>
          <el-dropdown-item >移动到</el-dropdown-item>
          <el-dropdown-item >重命名</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      </thead>
      <tbody id="zuo">


      </tbody>
    </table>
  </div>

</template>




<script>
import axios from "axios";
import $ from 'jquery';
import { videoPlayer } from 'vue-video-player'
var user=window.sessionStorage.getItem('username');
export default {
  components: {
    videoPlayer
  },
  data() {
    return {
      videoFlag: false,
      //是否显示进度条
      videoUploadPercent: "",
      //进度条的进度，
      isShowUploadVideo: false,
      //显示上传按钮
      videoForm: {
        showVideoPath: ''
      },
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: "video/mp4", // 类型
          src: 'http://localhost:9073/' // url地址
        }],
        poster: '', // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      }



    }
  },

  methods: {

    getList() {
      $.ajax({
        url: "http://localhost:9071/video?user="+user,
        dataType: "json",
        success: function (resp) {
          $("#zuo").empty();

          $.each(resp, function (i, n) {


            $("#zuo").append("<tr><td><video controls='controls' width='200px' height='200px' src='http://localhost:9071/"+n.vname+"'  ></video></td><td><a href='http://localhost:9070/"+n.vname+"'>" + n.vname + "</a></td></td><td>"+n.min+"</td><td class='m'>" + n.ctime + "</td><td><el-button type='text' size='medium'><i class='el-icon-download'></i></el-button></td><td><el-button class='dele' type='text' size='medium'><i class='el-icon-delete'></i></el-button></td><td><el-button type=\"text\" size=\"medium\"><i class=\"el-icon-more-outline\"></i></el-button></td></tr>");})
        }

      })




    }



  },



  created() {
    this.getList();
  }

}
</script>
<style lang="less" scoped>
.a{
  text-decoration: none;
}
.uploader-example {
  width: 880px;
  padding: 15px;
  margin: 40px auto 0;
  font-size: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
.uploader-example .uploader-btn {
  margin-right: 4px;
}
.uploader-example .uploader-list {
  max-height: 440px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
